<template>
    <el-container>
      <el-header class="headerTitle">
        <h1>前端梦工厂四组作业</h1>
      </el-header>
      <el-container>
        <el-aside width="59.9%">
            <div class="bottom_all">
              <music-bottom>播放列表</music-bottom>
            </div>
              <song-lsit-page/>
        </el-aside>
        <el-container>
          <el-main>
              <lyric v-bind:currentTime="currentTime"></lyric>
          </el-main>
          <el-footer>
              <mini-player @getProgress="handleProgress"></mini-player>
          </el-footer>
        </el-container>
      </el-container>
    </el-container>
</template>

<script>
import SongLsitPage from '@/components/content/SongLsitPage.vue'
import MusicBottom from '@/components/common/MusicBottom.vue'
import Lyric from '@/components/content/lyric.vue'
import MiniPlayer from '@/components/player/MiniPlayer.vue'

export default {
  name:"Home",
  components: { SongLsitPage, MusicBottom, Lyric, MiniPlayer },
  data() {
    return {
      currentTime:0
    }
  },
  methods:{
    handleProgress(time){
      // console.log(time)
      this.currentTime = time
    }
  }
}
</script>

<style>
.bottom_all{
  width: 400px;
  display: flex;
  justify-content: space-between;
}
.el-main{
  height: 75vh;
  /* overflow: scroll; */
}

.el-aside{
  height: 80vh;
  overflow: hidden !important;
}
.el-header{
  text-align: center;
  line-height: 40px;
  color: rgb(115, 151, 151);
}
</style>
